<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>排序</title>
<style type="text/css">
	#ul1{background: skyblue;}	
</style>

</head>
<body>
<ul id="ul1" >	
	<li>2</li>
	<li>35</li>
	<li>1</li>
	<li>46</li>
	<li>5</li>
</ul>

<input id="btn1" type="button" name="" value="排序">

<script type="text/javascript">
	var btn1 = document.getElementById('btn1');
	var ul1 = document.getElementById('ul1');
	btn1.onclick = function() {
		let li = ul1.getElementsByTagName('li');
		var arr = [];
		for(let i = 0; i < li.length; i++) {
			arr[i] = li[i];
		}
		arr.sort(function(li1,li2) {
			let n1 = parseInt(li1.innerHTML);
			let n2 = parseInt(li2.innerHTML);
			return n1 - n2;
		});
		for(let i = 0; i < arr.length; i++) {
			// console.log("li[" + i + "] = " + li[i].innerHTML + "\t arr[" + i + "] = " + arr[i].innerHTML);
			
			 ul1.appendChild(arr[i]);
		}
		
	}
</script>

</body>
</html>